<!--
 * @Author: your name
 * @Date: 2021-01-05 17:43:03
 * @LastEditTime: 2021-01-05 19:07:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\chooseService\chooseService.vue
-->
<template>
    <div class="chooseService-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('devWifi.wifiSN')}}</span>
                <el-input v-big v-model="wifiSN" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <div class="button-box">
            <el-button type="primary" icon='el-icon-plus' @click="()=>{$store.commit('setNewVisible',true)}">{{$t('servicechange.switch')}}</el-button>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe :column='column' :select='false'>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
        <edit  @uploadData='query' v-if='newVisible'></edit>
    </div>
</template>

<script>
import baseTable from '../../../components/common/baseTableNew'
import edit from './edit.vue'
export default {
    components: {
        baseTable,
        edit
    },
    props: {

    },
    data() {
        return {
            wifiSN:'',
            dataRows:[],
            loading:false,
            total:1,
            size:10,
            current:1,
            column:[{
                title: this.$t('devWifi.wifiSN'),
                value: 'wifiSN',
            },
            {
                title: this.$t('wifiSN_history_optUser'),
                value: 'optUserName',
                slot: 'optUserName',
            },
            {
                title: this.$t('servicechange.ori_service'),
                value: 'oriMqttHost',
                slot: 'oriMqttHost',
            },
            {
                title: this.$t('servicechange.new_service'),
                value: 'newMqttHost',
                slot: 'newMqttHost',
            },
            {
                title: this.$t('package.updateTime'),
                value: 'createTime',
                slot: 'createTime',
            }],
            
        };
    },
    computed: {
        newVisible(){
            return this.$store.state.sysStore.newVisible
        }
    },
    watch: {
        total(){
            if(this.total==(this.current-1)*this.size&& this.total!=0){
                this.current-=1;
                if(this.current < 1){
                    this.current = 1
                }
                this.mqttConfigServiceOptConfigPage();
            }
        }
    },
    created() {

    },
    mounted() {
        this.mqttConfigServiceOptConfigPage()
    },
    methods: {
        
        async mqttConfigServiceOptConfigPage(){
            this.loading = true
            let res = await this.API.mqttConfigServiceOptConfigPage({
                wifiSN: this.wifiSN,
                size: this.size,
                current: this.current
            })
            this.loading = false
            this.dataRows = res.rows
            this.total = res.total
        },
        query(){
            this.current = 1
            this.mqttConfigServiceOptConfigPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.mqttConfigServiceOptConfigPage()
        },
        handleCurrentChange(val) {
          this.current = val
          this.mqttConfigServiceOptConfigPage()
        },
    },
};
</script>

<style  lang="less" scoped>

</style>
